import React from 'react';
import store from './store';
import './show.css';
import { Avatar, Card, Col, Row } from 'antd';
import { getUserNameAction, getSchoolsList,getNewsList } from './store/actionCreators';
class show extends React.Component {
    constructor(props) {
        super(props)
        this.state = store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    handleStoreChange() {
        this.setState(store.getState());
    }
    componentDidMount() {
        const action = getUserNameAction();
        store.dispatch(action);
        const action2 = getSchoolsList();
        store.dispatch(action2);
        const action3 = getNewsList();
        store.dispatch(action3);
    }
    render() {

        return (<div>
            <div className="username">
                <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
                <p>{this.state.user} </p>
            </div>
            <div style={{ background: '#ECECEC' }}>
                <Row gutter={16}>
                    <Col span={12}>
                        <Card title="School Facts" bordered={false}>
                            <ul>
                                {this.state.schools.map(item =>
                                    <li key={item.id}>
                                        <div>
                                            <p>Number of Schools</p>
                                            <p className="inline">{item.schools}</p>
                                            <a href="#">See Schools>></a>
                                        </div>
                                        <div>
                                            <p>Number of Programs</p>
                                            <p className="inline">{item.programs}</p>
                                            <a href="#">See Programs>></a>
                                        </div>
                                        <div>
                                            <p>Number of Classes</p>
                                            <p className="inline">{item.classes}</p>
                                            <a href="#">See Classes>></a>
                                        </div>
                                        <div>
                                            <p>Number of Students</p>
                                            <p className="inline">{item.students}</p>
                                            <a href="#">See Students>></a>
                                        </div>
                                    </li>
                                )}
                            </ul>
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card title="News" bordered={false}>
                            <ul>
                            {this.state.news.map((item,index) =>
                                <li key={index}>
                                    <div>
                                        <div className="username">
                                            <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
                                            <p>{this.state.user} </p>
                                        </div>
                                        <span>5 days ago</span>
                                        <p>{item.title}</p>
                                        <p>{item.comment}</p>
                                    </div>
                                </li>)}
                            </ul>
                        </Card>
                    </Col>
                </Row>
            </div>
        </div>
        )
    }
}
export default show;